<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2>注册</h2>
      <el-form ref="registerForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="form.mobileNo" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item label="密码" prop="passWord">
          <el-input v-model="form.passWord" type="passWord" placeholder="请输入密码" show-password />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码" show-password />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">注册</el-button>
          <el-button @click="goHome">返回主页</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="login-bg">
      <a href="https://beian.miit.gov.cn/">冀ICP备2025105329号-1</a>
    </div>
  </div>
</template>

<script>

import { register } from '@/api/user'
export default {
  data() {
    return {
      form: {
        mobileNo: '',
        passWord: '',
        confirmPassword: ''
      },
      rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.form.passWord) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          }, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.registerForm.validate(async valid => {
        if (valid) {
          await register(this.form).then(response => {
            setTimeout(() => {
              this.goHome()
            }, 1000)
          }).catch(() => {
          })
          console.log('注册信息:', this.form)
        } else {
          this.$message.error('请检查输入内容')
          return false
        }
      })
    },
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background:url('../assets/img/zhuce.jpg') no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.register-card {
  width: 100%;
  max-width: 500px;
  padding: 30px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

  .login-bg{
    position: fixed;
    top: 95%;
    color: rgba(255, 255, 255, 0.8);
  }

</style>
